<template>
	<TnPopup v-model="showPopup" open-direction="bottom" close-btn="true" close-btn-position="right-top"
		@close="closePopup">
		<view class="textbook">
			<view class="title"> 选择学习阶段 </view>
			<view class="tips">AI会根据你的英语水平使用合适的词汇与你对话。</view>
			<scroll-view scroll-y="true" style="height: 560rpx">
				<view class="list-box" v-for="(item, index) in list" :key="index">
					<viwe class="title">{{ item.name }}</viwe>
					<view class="list">
						<view :class="[
                'list-item',
                currentListItemIndex == subItem.id ? 'current-list-item' : '',
              ]" v-for="(subItem, subIndex) in item.grade_list" :key="subIndex"
							@click="toggleListItem(subIndex, subItem)">{{ subItem.name }}</view>
					</view>
				</view>
			</scroll-view>

			<button class="btn" @click="onBtnClick">确定</button>
		</view>
	</TnPopup>
</template>

<script lang="ts" setup>
	import { ref, watch, defineProps, defineExpose, defineEmits } from 'vue'
	import { getGradesApi, getAllGrades } from '@/services/api'
	import { useUniAppSystemRectInfo } from '@tuniao/tnui-vue3-uniapp/hooks'
	import { onShow } from '@dcloudio/uni-app'
	import storageApi from '@/utils/storage'
	const { navBarInfo } = useUniAppSystemRectInfo()
	const showPopup = ref(false)
	const currentItem = ref({})
	const list = ref([])
	const currentTabIndex = ref(0)
	const currentListItemIndex = ref(1)
	const emit = defineEmits(['updateValue'])
	defineExpose({
		show() {
			showPopup.value = true
      let allList:any = []
      list.value.map((item,index) =>{
        allList = [...allList,...item.grade_list]
      })
		  currentItem.value = allList.find(item => item.id === currentListItemIndex.value)
		},
	})

	const onBtnClick = () => {
		showPopup.value = false
		storageApi.set('gradeData', currentItem.value)
		emit('updateValue')
		storageApi.set('currentListItemIndex', currentItem.value.id)
	}

	const toggleListItem = (index, item) => {

		currentListItemIndex.value = item.id
		currentItem.value = item
	}
	// 退出时  读取storage里的数据 赋值curenentItem 实现没有保存 还原选择的年级
	const closePopup = () => {
		currentTabIndex.value = Number(storageApi.get('currentTabIndex'))
		currentListItemIndex.value = Number(storageApi.get('currentListItemIndex'))
		currentItem.value = list.value.find(item => item.id === currentListItemIndex.value)
	}
	onShow(() => {
		try {
			currentTabIndex.value = Number(storageApi.get('currentTabIndex'))
			currentListItemIndex.value = Number(storageApi.get('currentListItemIndex'))
			getData()
		} catch (err) { }
	})

	const getData = () => {
		getAllGrades().then((res) => {
			const { code, data } = res
			if (code === 0) {
				list.value = data.grade_objects
			}
		})
	}
</script>

<style lang="scss" scoped>
	.textbook {
		background: linear-gradient(180deg, #dee2ff 0%, #ffffff 100%);
		// padding: 48rpx;
		padding: 24rpx 48rpx;

		.title {
			font-family:
				PingFang SC,
				PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #000000;
			line-height: 48rpx;
			font-style: normal;
			text-transform: none;
			margin-bottom: 16rpx;
			width: 100%;
			text-align: center;
		}

		.tips {
			width: 100%;
			text-align: center;
			font-family:
				PingFang SC,
				PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
			line-height: 40rpx;
			font-style: normal;
			margin-bottom: 48rpx;
			text-transform: none;
		}

		.list-box {
			.title {
				font-family:
					PingFang SC,
					PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #000000;
				line-height: 48rpx;
				text-align: center;
				font-style: normal;
				text-transform: none;
			}

			.list {
				margin-top: 16rpx;
				display: flex;
				justify-content: space-between;
				flex-direction: row;
				flex-wrap: wrap;
			}

			.list-item {
				width: calc((100% - 68rpx) / 3);
				margin-bottom: 32rpx;
				height: 108rpx;
				line-height: 108rpx;
				background: #ffffff;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				font-family:
					PingFang SC,
					PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #000000;
				text-align: center;
				font-style: normal;
				text-transform: none;
			}

			.current-list-item {
				border: 1px solid #4b49e8;
			}
		}

		.btn {
			width: 654rpx;
			height: 96rpx;
			background: #4b49e8;
			border-radius: 1998rpx 1998rpx 1998rpx 1998rpx;
			font-family:
				PingFang SC,
				PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #ffffff;
			line-height: 96rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
			margin-top: 40rpx;
		}
	}
</style>